import React, { useState, useEffect, useRef } from 'react';
import { message as antdMessage } from 'antd';
import MessageList from './MessageList';
import InputArea from './InputArea';
import './ChatContainer.css';

// 根据变量名和分类提供填写建议
const getVariableSuggestions = (variableName, category) => {
    const suggestions = {
        // 通用变量
        'user_input': {
            description: '您的具体需求或想要处理的内容',
            examples: ['写一篇关于AI的文章', '分析这段代码的功能', '翻译这段文字']
        },
        'topic': {
            description: '主题或话题',
            examples: ['人工智能', '环保', '教育改革', '科技发展']
        },
        'content': {
            description: '具体的内容或文本',
            examples: ['一段代码', '一篇文章', '一个问题']
        },
        'language': {
            description: '目标语言',
            examples: ['中文', '英文', '日文', '法文']
        },
        'style': {
            description: '写作风格或语调',
            examples: ['正式', '轻松', '专业', '幽默']
        },
        'audience': {
            description: '目标受众',
            examples: ['初学者', '专业人士', '学生', '普通大众']
        },
        'format': {
            description: '输出格式',
            examples: ['列表', '段落', '表格', '步骤']
        },
        'length': {
            description: '内容长度',
            examples: ['简短', '中等', '详细', '500字左右']
        }
    };

    // 根据分类提供特定建议
    const categorySpecific = {
        '写作': {
            'genre': { description: '文体类型', examples: ['小说', '散文', '新闻', '博客'] },
            'tone': { description: '语调', examples: ['正式', '亲切', '严肃', '轻松'] }
        },
        '编程': {
            'programming_language': { description: '编程语言', examples: ['Python', 'JavaScript', 'Java', 'C++'] },
            'framework': { description: '框架或库', examples: ['React', 'Vue', 'Django', 'Spring'] }
        },
        '商业': {
            'industry': { description: '行业领域', examples: ['科技', '金融', '教育', '医疗'] },
            'market': { description: '目标市场', examples: ['B2B', 'B2C', '国内市场', '海外市场'] }
        },
        '教育': {
            'subject': { description: '学科', examples: ['数学', '语文', '英语', '科学'] },
            'grade': { description: '年级水平', examples: ['小学', '初中', '高中', '大学'] }
        }
    };

    // 首先检查通用变量
    if (suggestions[variableName]) {
        return suggestions[variableName];
    }

    // 然后检查分类特定变量
    if (categorySpecific[category] && categorySpecific[category][variableName]) {
        return categorySpecific[category][variableName];
    }

    // 默认建议
    return {
        description: '请填写相关的具体内容',
        examples: ['根据您的需求填写', '具体的值或描述']
    };
};

// 根据模板分类和标题生成使用示例
const getTemplateExample = (category, title) => {
    const examples = {
        '写作': {
            '写作助手': `**输入示例**：请将 \${user_input} 替换为 "写一篇关于人工智能发展的议论文"
**输出效果**：我会生成一篇结构完整的议论文，包含：
• 引人入胜的开头
• 逻辑清晰的论证结构
• 丰富的论据和例证
• 有力的结论总结`,
            default: `**输入示例**：提供您的写作主题和要求
**输出效果**：生成符合要求的高质量文章，包含完整的结构和丰富的内容`
        },
        '编程': {
            '代码解释器': `**输入示例**：请将 \${user_input} 替换为 "解释这段Python代码的功能"
**输出效果**：我会提供：
• 代码的整体功能说明
• 逐行详细解释
• 关键概念和语法说明
• 可能的优化建议`,
            default: `**输入示例**：提供您的代码或编程问题
**输出效果**：生成专业的代码分析、解决方案或编程指导`
        },
        '商业': {
            '商业分析师': `**输入示例**：请将 \${user_input} 替换为 "分析电商行业的发展趋势"
**输出效果**：我会提供：
• 行业现状分析
• SWOT分析框架
• 市场趋势预测
• 商业机会识别`,
            default: `**输入示例**：提供您的商业问题或分析需求
**输出效果**：生成专业的商业分析报告和建议`
        },
        '教育': {
            '学习导师': `**输入示例**：请将 \${user_input} 替换为 "制定学习Python编程的计划"
**输出效果**：我会制定：
• 个性化学习路径
• 阶段性学习目标
• 推荐学习资源
• 学习方法建议`,
            default: `**输入示例**：提供您的学习目标和需求
**输出效果**：生成个性化的学习计划和指导方案`
        },
        '设计': {
            '创意设计师': `**输入示例**：请将 \${user_input} 替换为 "设计一个科技公司的Logo"
**输出效果**：我会提供：
• 设计理念和概念
• 色彩搭配建议
• 字体和布局方案
• 设计元素说明`,
            default: `**输入示例**：提供您的设计需求和要求
**输出效果**：生成创意设计方案和专业建议`
        },
        '数据': {
            '数据分析专家': `**输入示例**：请将 \${user_input} 替换为 "分析销售数据的趋势"
**输出效果**：我会提供：
• 数据分析方法
• 统计指标解读
• 趋势分析结果
• 业务洞察建议`,
            default: `**输入示例**：提供您的数据分析需求
**输出效果**：生成专业的数据分析报告和洞察`
        },
        '翻译': {
            '翻译专家': `**输入示例**：请将 \${user_input} 替换为 "将这段中文翻译成英文"
**输出效果**：我会提供：
• 准确的翻译结果
• 语言文化背景说明
• 表达方式优化
• 语法和用词建议`,
            default: `**输入示例**：提供您的翻译需求和内容
**输出效果**：生成准确、地道的翻译结果`
        },
        '产品': {
            '产品经理': `**输入示例**：请将 \${user_input} 替换为 "设计一个在线教育APP"
**输出效果**：我会提供：
• 产品需求分析
• 功能规划设计
• 用户体验方案
• 商业模式建议`,
            default: `**输入示例**：提供您的产品设计需求
**输出效果**：生成完整的产品规划和设计方案`
        }
    };

    const categoryExamples = examples[category];
    if (categoryExamples) {
        return categoryExamples[title] || categoryExamples.default;
    }

    return `**输入示例**：根据模板要求提供具体内容
**输出效果**：我会使用专业的提示词结构，为您生成高质量、符合要求的内容`;
};

const ChatContainer = ({ templateInfo }) => {
    const [messages, setMessages] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
    const [messageApi, contextHolder] = antdMessage.useMessage();
    const eventSourceRef = useRef(null);

    // 添加欢迎消息或模板信息
    useEffect(() => {
        if (templateInfo) {
            // 如果有模板信息，显示模板详情
            const templateMessage = {
                id: 'template-info',
                role: 'assistant',
                content: `🎯 **已加载模板：${templateInfo.templateInfo.title}**

📝 **模板描述：**
${templateInfo.templateInfo.description}

🏷️ **分类：** ${templateInfo.templateInfo.category}

🔖 **标签：** ${templateInfo.templateInfo.tags.join(', ')}

📋 **模板内容：**
\`\`\`
${templateInfo.content}
\`\`\`

💡 **使用说明：**
- 这个模板已经为您准备好了
- 您可以直接使用，或者告诉我如何修改
- 如果模板中有变量（如 \${变量名}），请告诉我具体的值

${templateInfo.templateInfo.templateKeys && templateInfo.templateInfo.templateKeys.length > 0 ?
`🔧 **模板变量说明：**
${templateInfo.templateInfo.templateKeys.map(key => {
    // 根据变量名提供具体的填写建议
    const suggestions = getVariableSuggestions(key, templateInfo.templateInfo.category);
    return `• **\${${key}}**: ${suggestions.description}\n  示例：${suggestions.examples.join('、')}`;
}).join('\n')}

` : ''}📝 **使用方式：**
1. **直接使用**：我可以直接使用这个模板为您生成内容
2. **填写变量**：如果有变量，请告诉我具体的值，例如："请将 \${user_input} 替换为 '写一篇关于人工智能的文章'"
3. **修改优化**：告诉我需要调整的地方，我会为您优化模板

🎯 **使用效果预览：**
当您使用这个模板时，我会：
1. **应用模板内容**：使用模板中的专业提示词结构
2. **替换变量**：将变量替换为您提供的具体内容
3. **生成结果**：基于优化后的提示词为您生成高质量内容
4. **保持风格**：确保输出符合模板的专业标准

📋 **使用示例：**
${getTemplateExample(templateInfo.templateInfo.category, templateInfo.templateInfo.title)}

现在您可以说：
• "直接使用这个模板"
• "请将 \${变量名} 替换为 具体内容"
• "帮我优化这个模板，我想要..."`,
                timestamp: new Date(),
                isComplete: true,
                isTemplate: true
            };
            setMessages([templateMessage]);
        } else {
            // 默认欢迎消息
            const welcomeMessage = {
                id: 'welcome',
                role: 'assistant',
                content: '你好！我是AI提示词生成助手。请告诉我你想要生成什么样的提示词，我会帮你优化并生成高质量的提示词。',
                timestamp: new Date(),
                isComplete: true
            };
            setMessages([welcomeMessage]);
        }
    }, [templateInfo]);

    const handleSendMessage = async (content) => {
        if (!content.trim() || isLoading) return;

        // 添加用户消息
        const userMessage = {
            id: Date.now(),
            role: 'user',
            content: content.trim(),
            timestamp: new Date(),
            isComplete: true
        };
        setMessages(prev => [...prev, userMessage]);
        setIsLoading(true);

        // 创建助手消息占位符
        const assistantMessage = {
            id: Date.now() + 1,
            role: 'assistant',
            content: '',
            timestamp: new Date(),
            isComplete: false,
            isStreaming: true
        };
        setMessages(prev => [...prev, assistantMessage]);

        try {
            await sendStreamMessage(content, assistantMessage.id);
        } catch (error) {
            messageApi.error('发送消息失败: ' + error.message);
            // 移除失败的消息
            setMessages(prev => prev.filter(msg => msg.id !== assistantMessage.id));
        } finally {
            setIsLoading(false);
        }
    };

    const sendStreamMessage = (content, messageId) => {
        return new Promise((resolve, reject) => {
            // 关闭之前的连接
            if (eventSourceRef.current) {
                eventSourceRef.current.close();
            }

            console.log('开始建立SSE连接:', content);

            const eventSource = new EventSource(
                `http://localhost:8080/api/chat/stream?message=${encodeURIComponent(content)}`
            );
            eventSourceRef.current = eventSource;

            let fullText = ''; // 完整接收的文本
            let hasError = false;

            eventSource.onopen = (event) => {
                console.log('SSE连接已建立', event);
            };

            eventSource.addEventListener('start', (event) => {
                console.log('开始接收消息:', event.data);
            });

            eventSource.addEventListener('message', (event) => {
                const chunk = event.data;
                if (chunk && !hasError) {
                    fullText += chunk;
                    console.log('接收到数据块:', chunk);
                    // 不立即更新显示，等待接收完成
                }
            });

            eventSource.addEventListener('done', (event) => {
                console.log('消息接收完成，开始打字效果，总长度:', fullText.length);
                if (!hasError) {
                    // 接收完成后，设置完整文本并开始打字效果
                    setMessages(prev => prev.map(msg =>
                        msg.id === messageId
                            ? {
                                ...msg,
                                content: fullText,
                                isComplete: false,
                                isStreaming: true,
                                shouldStartTyping: true // 新增标记，表示应该开始打字
                            }
                            : msg
                    ));
                }
                eventSource.close();
                eventSourceRef.current = null;
                resolve();
            });

            eventSource.addEventListener('error', (event) => {
                console.error('SSE error事件:', event);
                hasError = true;
                const errorData = event.data || '生成失败，请重试';
                setMessages(prev => prev.map(msg =>
                    msg.id === messageId
                        ? { ...msg, content: errorData, isComplete: true, isStreaming: false, isError: true }
                        : msg
                ));
                eventSource.close();
                eventSourceRef.current = null;
                reject(new Error(errorData));
            });

            eventSource.onerror = (error) => {
                console.error('EventSource onerror:', error);
                console.error('EventSource readyState:', eventSource.readyState);

                // 只有在连接真正失败时才处理错误
                if (eventSource.readyState === EventSource.CLOSED) {
                    setMessages(prev => prev.map(msg =>
                        msg.id === messageId
                            ? { ...msg, content: '连接失败，请检查网络或重试', isComplete: true, isStreaming: false, isError: true }
                            : msg
                    ));
                    eventSource.close();
                    eventSourceRef.current = null;
                    reject(new Error('连接失败'));
                }
            };
        });
    };

    // 清理连接
    useEffect(() => {
        return () => {
            if (eventSourceRef.current) {
                eventSourceRef.current.close();
            }
        };
    }, []);

    const handleClearChat = () => {
        setMessages([]);
        if (eventSourceRef.current) {
            eventSourceRef.current.close();
            eventSourceRef.current = null;
        }
        setIsLoading(false);
    };

    const handleStopGeneration = () => {
        if (eventSourceRef.current) {
            eventSourceRef.current.close();
            eventSourceRef.current = null;
        }
        setIsLoading(false);
    };

    // 打字完成回调
    const handleTypingComplete = (messageId) => {
        setMessages(prev => prev.map(msg =>
            msg.id === messageId
                ? {
                    ...msg,
                    isComplete: true,
                    isStreaming: false,
                    shouldStartTyping: false // 清除打字触发标记
                }
                : msg
        ));
        setIsLoading(false);
    };

    return (
        <div className="chat-container">
            {contextHolder}
            <div className="chat-header">
                <h2>AI提示词生成助手</h2>
                <div className="chat-actions">
                    {isLoading && (
                        <button 
                            className="stop-button"
                            onClick={handleStopGeneration}
                        >
                            停止生成
                        </button>
                    )}
                    <button 
                        className="clear-button"
                        onClick={handleClearChat}
                        disabled={isLoading}
                    >
                        清空对话
                    </button>
                </div>
            </div>
            
            <MessageList
                messages={messages}
                onTypingComplete={handleTypingComplete}
            />
            
            <InputArea 
                onSend={handleSendMessage} 
                disabled={isLoading}
                placeholder={isLoading ? "正在生成中..." : "请输入你想要生成的提示词描述..."}
            />
        </div>
    );
};

export default ChatContainer;
